import React from 'react';
import FieldContext from './fieldContext';
import useForm from './useForm'
/**
 * 这个是最外层的Form组件
 * @param props 属性对象
 * @returns 
 * initialValues 初始对象
 * onFinish 完成时的回调函数
 */


const Form:React.FC<any> = ({initialValues,onFinish,children,onFinishFailed}) =>{
    let formInstance = useForm();
    formInstance.setCallbacks({
        onFinish,
        onFinishFailed
    })
    // const mountRef = React.useRef<any>(null);//mountRef可以在多次渲染的时候保持不变
    // formInstance.setInitialValues(initialValues,mountRef.current)
    // if(!mountRef.current){
    //     mountRef.current = true
    // }

    return(
        //表单提交时候的回调函数
        <form
            onSubmit={
                event=>{
                    event.preventDefault();
                    event.stopPropagation();
                    //要调用表单提交的方法x
                    formInstance.submit();

                }
            }
        >
        {/* formInstance form的实例 */}
            <FieldContext.Provider value={formInstance}>
                {children}
            </FieldContext.Provider>
        </form>
    )
   
}




export default Form